import { Modal } from 'ant-design-vue';
import { defineComponent, toRefs, unref } from 'vue';
import { basicProps } from '../props';
import { useModalDragMove } from '../hooks/useModalDrag';
import { useAttrs } from '@/hooks/core/useAttrs';
import { extendSlots } from '@/utils/helper/tsxHelper';

export default defineComponent({
	name: 'Modal',
	inheritAttrs: false,
	props: basicProps,
	emits: ['cancel'],
	setup(props, { slots }) {
		const { visible, draggable, destroyOnClose } = toRefs(props);
		const attrs = useAttrs();
		useModalDragMove({
			visible,
			destroyOnClose,
			draggable,
		});

		return () => {
			const propsData = { ...unref(attrs), ...props } as Recordable;
			return <Modal {...propsData}>{extendSlots(slots)}</Modal>;
		};
	},
});
